<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name='viewport' content="width=device-width, initial-scale=1">
	<!-- 引入css文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- 引入jquery 需要放在所有js包之前 -->
	<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
	<!-- 引入bootstrap.js包 -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container-fluid" style="background-color: red;height: 50px">
		<div class="container" style="background-color: rgba(0,255,0,.8);height: 300px">
		    <form action="http://127.0.0.1/project/identifying_code/test.php" method="POST">
		        <div class="row">
		        	<div class="col-lg-12">
		        		<!-- 验证码是图片  通过img的src可以指向php文件(前提是这个php文件能生成文件) -->
		        		<img  id="code" src="http://127.0.0.1/project/identifying_code/identifying_code.php"     style="height: 30px;width:100px;border: 1px red solid;">;
		        		<input name="code"></input>
                        <input type="submit" value="提交">
		        	</div>
		        </div>
		    </form>
		</div>
	</div>

	<script>
		// 此处有个问题 浏览器第一次获取资源会缓存 第二次访问同样的资源 并不会发送请求(为了加快速度)
		// 所以点击了也不会换图片
		// 解决方法： 修改url 相当于随便传个参数
		code.onclick = function() {
			this.src = "http://127.0.0.1/project/identifying_code/identifying_code.php?"+Math.random();
		}
	</script>

	
</body>
</html>